<template>
  <a-card class="account-card" title="商家账户信息">
    <div class="avatar-container">
      <a-avatar size="100" :src="businessInfo.avater" />
    </div>
    <a-list>
      <a-list-item>
        <strong>账户ID:</strong> <span>{{ businessInfo.userid }}</span>
      </a-list-item>
      <a-list-item>
        <strong>商家姓名:</strong> <span>{{ businessInfo.username }}</span>
      </a-list-item>
      <a-list-item>
        <strong>商家电话:</strong> <span>{{ businessInfo.phone }}</span>
      </a-list-item>
      <a-list-item>
        <strong>商家地址:</strong> <span>{{ businessInfo.address }}</span>
      </a-list-item>
      <a-list-item>
        <strong>商家自述:</strong> <span>{{ businessInfo.caption }}</span>
      </a-list-item>
    </a-list>
    <div class="button-group">
      <a-button type="default" @click="editInfo">修改信息</a-button>
      <a-button type="default" @click="changePassword">修改密码</a-button>
      <a-button danger @click="handleLogout">退出登录</a-button>
    </div>
  </a-card>
</template>

<script>
import { onBeforeMount, ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import request from '../../util/request';

export default {
  name: 'BusAccount',
  setup() {

    const router = useRouter();

    const businessInfo = ref({
      userid: '',
      avater: '',
      username: '',
      phone: '',
      address: '',
      caption: '',
    });

    onBeforeMount(() => {
      request.post('/account/get', {
        userid: sessionStorage.getItem('userid'),
        role: 'business',
      }).then(res => {
        businessInfo.value = res.data;
        if(res.data.avatar === '' || res.data.avatar === null) {
          businessInfo.value.avater = 'https://via.placeholder.com/100';
        }
      }).catch(err => {
        message.error("获取商家信息失败: ", err);
      })
    });

    const editInfo = () => {
      console.log('修改信息');
      router.push({ name: 'BusInfoEditor' });
    };

    const changePassword = () => {
      console.log('修改密码');
      router.push({ name: 'BusPwdEditor' });
    };

    const handleLogout = () => {
      sessionStorage.removeItem('userid');
      sessionStorage.removeItem('role');
      message.success('已成功退出登录');
      router.push({ name: 'Login' });
    };

    return {
      businessInfo,
      editInfo,
      changePassword,
      handleLogout,
    };
  }
};
//   data() {
//     return {
//       businessInfo: {
//         name: '李四',
//         phone: '13900000000',
//         address: '上海市浦东新区某街道，邮政编码：200000',
//         description: '欢迎光临我的商店，提供优质的商品和服务。',
//       },
//     };
//   },
//   methods: {
//     editInfo() {
//       console.log('修改信息');
//       this.$router.push({ name: 'BusInfoEditor' });
//     },
//     changePassword() {
//       console.log('修改密码');
//       this.$router.push({ name: 'BusPwdEditor' });
//     },
//     handleLogout() {
//       console.log('用户已退出登录');
//       sessionStorage.removeItem('userid');
//       sessionStorage.removeItem('role');
//       this.$message.success('已成功退出登录');
//       this.$router.push({ name: 'Login' });
//     },
//   },
// };
</script>

<style scoped>
.account-card {
  max-width: 700px; /* 增加卡片的最大宽度 */
  margin: 20px auto; /* 居中显示 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-container {
  display: flex;
  justify-content: center; /* 居中头像 */
  margin-bottom: 20px; /* 头像与信息之间的间距 */
}

.button-group {
  display: flex;
  justify-content: space-between; /* 按钮之间的间距 */
  margin-top: 20px; /* 按钮与信息之间的间距 */
}
</style>
